import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import { Input, Tag } from 'antd';
import React from 'react';
import type { DetailItem } from '../data';
import { editSpace, querySpaceDetail } from '../service';
import { xdeviceType } from '@/pages/Spaces/utils/utils';

const SpaceDetail: React.FC<{
  id: string;
}> = ({ id = '' }) => {
  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '车位号',
      dataIndex: 'spaceName',
      render: (_, record) => {
        const tempSpaceName = record !== undefined ? record.spaceName || '' : '';
        // const tempSpaceId = record !== undefined ? record.id || '' : '';
        return <div>{tempSpaceName}</div>;
      },
      renderEdit: (_, { value, onChange }) => <Input value={value} onChange={onChange} />,
      onSubmit: async (value) => editSpace({ id, spaceName: value }),
    },
    {
      label: '停车区域',
      dataIndex: 'zone',
      render: (_, record) => <div>{record?.zone.name}</div>,
    },
    {
      label: '所有人',
      dataIndex: 'ownerName',
      render: (_, record) => <div>{record?.ownerName || <Tag color={'magenta'}>{'-'}</Tag>}</div>,
    },
    {
      label: '联系方式',
      dataIndex: 'ownerPhone',
      render: (_, record) => <div>{record?.ownerPhone || <Tag color={'magenta'}>{'-'}</Tag>}</div>,
    },
    // {
    //   label: '是否共享',
    //   dataIndex: 'shareStatus',
    //   render: (_, record) => (
    //     <div>{record?.shareStatus && record.shareStatus === 1 ? '共享' : '未共享'}</div>
    //   ),
    // },
    // {
    //   label: '共享时间',
    //   dataIndex: 'sharableStartTime',
    //   render: (_, record) => {
    //     if (record) {
    //       const startTime =
    //         record?.sharableStartTime !== undefined
    //           ? moment.unix(record?.sharableStartTime - 480 * 60).format('HH:mm:ss')
    //           : '';
    //       const endTime =
    //         record?.sharableEndTime !== undefined
    //           ? moment.unix(record?.sharableEndTime - 480 * 60).format('HH:mm:ss')
    //           : '';
    //       return <div>{`${startTime} 至 ${endTime}`}</div>;
    //     }
    //     return undefined;
    //   },
    // },

    {
      label: '当前车辆',
      dataIndex: 'plateNumber',
      render: (_, record) => <div>{record?.plateNumber || '无'}</div>,
    },
    {
      label: '绑定设备',
      dataIndex: 'device',
      render: (_, record) => {
        if (!record?.device) return null;
        const { device } = record;
        return (
          <div>
            <Tag color={xdeviceType('lock').color}>{device?.deviceNo}</Tag>
          </div>
        );
      },
      editable: false,
    },
    {
      label: '状态',
      dataIndex: 'status',
      render: (_, record) => {
        const status = String(record?.status);
        if (status === '0') {
          return '空闲';
        }
        if (status === '2') {
          return '停车中..';
        }
        if (status === '3') {
          return '已预约';
        }
        if (status === '4') {
          return '未共享';
        }
        return '空闲';
      },
    },
  ];
  return (
    <ProDescriptions
      title="车位详情"
      column={1}
      columns={columns}
      params={{ id }}
      request={async () => {
        const res = await querySpaceDetail(id);
        return Promise.resolve(res);
      }}
    />
  );
};

export default SpaceDetail;
